//-----------渲染表格内容-------------------------------------
fetch('../../api/yuang.json')
.then(function(res){return res.json()})
.then(function(data){
  
    var tbo = document.querySelector('.tbo')
    tbo.innerHTML=cont(data)
})
function cont(data){
    return data.map(function(it,index){
        return`
                <tr>
                    <td><input type="checkbox" name="check" id=""></td>
                    <td>${it.id}</td>
                    <td>${it.name}</td>
                    <td>${it.age}</td>
                    <td>${it.post}</td>
                    <td>${it.rtime}</td>
                    <td>${it.duration}</td>
                    <td><img src="../../images/afterEnd/del.svg" alt="" title="删除用户"></td>
                    <td><img src="../../images/afterEnd/alter.svg" alt="" title="修改用户"></td> 
                </tr>
        `
    }).join('')
}
//---增加按钮----------------------------------
var btn = document.querySelector('.top .look img')
var fo = document.querySelector('.add')

fo.style.display = 'none'
btn.addEventListener('click',function(){
    console.log(111)
    if(fo.style.display=='none'){
        fo.style.display='block'
    }
})
// 全选 :checkbox前面要有空格
$('.the :checkbox').click(function(){
    if( $('.the :checkbox').prop('checked')==true){
        $('.tbo :checkbox').prop('checked',true)
    }else{
        $('.tbo :checkbox').prop('checked', false)
    }
  })
// 删除按钮
$('.tbo').on('click',' td:nth-child(8) img',function(){
    $('.tbo td:nth-child(8) img').click(alt())
})
function alt(){
    alert('确认要删除此条数据吗？')
}
//修改按钮
$('.tbo').on('click',' td:nth-child(9) img',function(){
    $('.tbo td:nth-child(9) img').click(alt1())
})
function alt1(){
    alert('确认要删修改此条数据吗？')
    $('.tbo tr').attr('contenteditable','true')
    console.log(111)
}


fetch('../../api/yuang.json')
.then(function(res){return res.json()})
.then(function(data){
   
 return cha(data)
})
//=================================
var inp =$('.top .look input')
var btn = $('.top .look button')
var tbo = $('table .tbo')
function cha(data){
    var datn = []
    var text ;
    btn.click(function(){
        text = inp.val()
        data.map(function(item,index){          
                if(item.name===text){
                    tbo.html(`
                    <tr >
                    <td><input type="checkbox" name="check" id=""></td>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td >${item.post}</td>
                    <td>${item.rtime}</td>
                    <td>${item.duration}</td>
                    <td><img src="../../images/afterEnd/del.svg" alt="" title="删除用户"></td>
                    <td><img src="../../images/afterEnd/alter.svg" alt="" title="修改用户"></td> 
                    </tr>
                    `)
                }
            })      
        }) 
       
}

